<script setup lang="ts">

</script>

<template>
  <div class="copyright-container">
    <a href="https://gitee.com/tomcclab/xiu-dada---graduation-project" target="_blank">
      <div class="line1">修哒哒
        <svg t="1739933546295" class="gitee" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="12997" width="200" height="200">
          <path
              d="M512 1021.72444445A509.72444445 509.72444445 0 1 1 512 2.27555555a509.72444445 509.72444445 0 0 1 0 1019.4488889z m257.99338667-566.37667556H480.54272a25.19495111 25.19495111 0 0 0-25.19495111 25.19495111v62.91456c0 13.90819555 11.28675555 25.19495111 25.12213333 25.19495111h176.21902223c13.98101333 0 25.19495111 11.28675555 25.1949511 25.12213334v12.59747555c0 41.72458667-33.78744889 75.51203555-75.51203555 75.51203555H367.23825778a25.19495111 25.19495111 0 0 1-25.12213333-25.12213333V417.62816c0-41.72458667 33.78744889-75.51203555 75.43921777-75.51203555h352.43804445c13.83537778 0 25.12213333-11.28675555 25.12213333-25.19495112v-62.91456a25.19495111 25.19495111 0 0 0-25.12213333-25.19495111h-352.43804445a188.74368 188.74368 0 0 0-188.74368 188.81649778v352.36522667c0 13.90819555 11.28675555 25.19495111 25.19495111 25.19495111h371.22503112a169.88387555 169.88387555 0 0 0 169.95669333-169.88387556V480.54272a25.19495111 25.19495111 0 0 0-25.19495111-25.19495111z"
              fill="#515151" p-id="12998"></path>
        </svg>
        Vue+Vite+Element Plus+Spring Boot3
      </div>
    </a>
    <div class="line2"><img src="@/assets/copyright.svg" class="copyright">Powered by zj</div>
  </div>
</template>

<style scoped>
.copyright-container {
  display: flex; /* 启用 Flex 布局 */
  flex-direction: column;
  margin-bottom: 20px;
  .line1 {
    cursor: pointer;
    display: flex; /* 启用 Flex 布局 */
    flex-direction: row; /* 垂直排列子元素 */
    height: 20px;
    width: auto;
    justify-content: center;
    margin: 8px auto;
    line-height: 20px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    .gitee {
      display: inline-block;
      margin: 4px 5px;
      width: 14px;
      height: 14px;
      transition: fill 0.3s ease-in-out;
    }
  }
  .line1 *{
    transition: inherit; /* 继承过渡效果 */
  }
  .line1:hover {
    color: #1677ff; /* 淡蓝色 */
    .gitee path {
      fill: currentColor; /* 继承父级颜色 */
      transition: fill 0.3s ease-in-out; /* SVG单独过渡 */
    }
  }
  .line2 {
    display: flex; /* 启用 Flex 布局 */
    flex-direction: row; /* 垂直排列子元素 */
    height: 14px;
    width: auto;
    margin: 0 auto;
    line-height: 14px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.95);
    .copyright {
      display: inline-block;
      margin-top: 1px;
      margin-right: 5px;
      width: 14px;
      height: 14px;
    }
  }
}
</style>